<template>
  <div class="myhome">
      <el-container class="mybox">
          <el-aside class="myside" :width="!isCollapse?'200px':'auto'">
            <Menu/>
          </el-aside>
          <el-container>
              <el-header class="myhead">
                <Head/>
              </el-header>
              <el-main>
                <router-view></router-view>
              </el-main>
              <el-footer class="myfoot">
                <Foot/>
              </el-footer>
          </el-container>
      </el-container>
  </div>
</template>

<script>
import {onMounted,computed} from "vue"
import { ajax } from '../../service';
import Foot from "@/components/foot.vue"
import Head from "@/components/head.vue"
import Menu from "@/components/menu.vue"

import {useStore} from "vuex"

export default {
  name:"main",
  components:{
    Foot,
    Head,
    Menu
  },
  setup(){
    const store = useStore()
    const isCollapse = computed(()=>{
      return store.state.isCollapse
    })
    onMounted(()=>{
      ajax.getuserinfo()
      .then(res=>{
        if(res.code==200){
           store.commit("changeUserInfo",res.result);
        }
      })
    })
    return {
      isCollapse
    }
  }
}
</script>

<style lang="scss" scoped>
.myhome{
  width:100%;
  height:100%;
  .mybox{
    display: flex;
    height:100%;
    .myside{
      background: #123456;
      height:100%;
    }
    .myhead{
      background-color: #fff;
      border-bottom:1px solid #999;
    }
    .myfoot{
      background: #fff;
      border-top:1px solid #999;
    }
  }
}
</style>

